<template>
	<div class="task-view">
		<div class="shade"></div>
		<div class="popup">
			<div class="title justify-content-between">
				<span class="fs28 colorFFF">任务查看</span>
				<img src="../assets/images/icon-close.png" @click="cancel">
			</div>
            <div class="content" v-loading="loading">
                <div v-if="taskData">
                    <div class="align-item-center">
                        <span class="fs20 color161D2E">{{taskData.deviceName}}</span>
                        <span class="fs18 color161D2E">（{{taskData.modelName}}）</span>
                    </div>
                    <div class="justify-content-between">
                        <div class="t-title">
                            共<span>{{taskData.deviceNum}}</span>个设备，分为<span>{{taskData.count}}</span>组
                        </div>
                        <div class="btn-xiafa justify-content-center" @click="issuedHandle()">
                            <img src="../assets/images/icon-down.png">
                            <span class="fs18 color285FE3 ml6">下发</span>
                        </div>
                    </div>
                    <div class="theader justify-content-between">
                        <div class="w330">分组</div>
                        <div class="w4630">设备编号</div>
                        <div class="w1460">阶段过程</div>
                        <div class="w840 justify-content-between">
                            <span>操作终端</span>
                            <div class="triangle"></div>
                        </div>
                        <div class="w840 justify-content-between">
                            <span>执行情况</span>
                            <div class="triangle"></div>
                        </div>
                        <div class="w330">操作</div>
                    </div>
                    <div class="tbodys">
                        <div class="tbody justify-content-between" v-for="(item, index) in taskData.list">
                            <div class="w330">{{index+1}}</div>
                            <div class="w4630">{{item.deviceNo}}</div>
                            <div class="w1460">{{item.modelState}}</div>
                            <div class="w840">{{item.operatorClient}}</div>
                            <div class="w840 text-center" :class="item.status.code == 'NOT' ? 'colorEE5400' : item.status.code == 'DOING' ? 'color5379E6' : 'color00A65E'">{{item.status.message}}</div>
                            <div class="w330 color285FE3 cursor-pointer" @click="taskDel(item.id)">删除</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btns justify-content-center">
                <div class="btn sure" @click="cancel">确认</div>
                <div class="btn cancel" @click="cancel">取消</div>
            </div>
		</div>
	</div>
</template>

<script>
import Bus from '@/assets/js/bus.js'
export default {
    name: 'TashView',
    props: {
        modelId: Number //型号id
    },
    data () {
        return {
            loading: false, //加载中
            taskData: null //弹窗数据
        }
    },
    created() {
        let _this = this;
        _this.getGroupList();
        Bus.$on('refreshTaskView', () => {
            _this.getGroupList();
        });
    },
    methods: {
    	// 关闭弹窗
    	cancel() {
    		this.$emit('cancel');
    	},
        // 下发
        issuedHandle() {
            Bus.$emit('issued', this.modelId);
        },
        // 查询下发分组
        getGroupList() {
            let _this = this;
            let params = {
                deviceId: _this.modelId
            };
            _this.loading = true;
            _this.axios.issuedGroupList(params).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    res.data.list.map((item) => {
                        // item.deviceNo = item.deviceNo.split(',').map(x => {
                        //     if (x < 10) {
                        //         x = '0' + x + '号';
                        //     } else {
                        //         x = x + '号';
                        //     }
                        //     return x;
                        // });
                        // item.deviceNo = item.deviceNo.join(',');
                        item.modelState = item.modelState.replace('ZPHJ', '装配环节');
                        item.modelState = item.modelState.replace('ZJCS', '整机测试');
                        item.modelState = item.modelState.replace('YSSY', '验收试验');
                        item.modelState = item.modelState.replace('LXSY', '例行试验');
                        item.modelState = item.modelState.replace('DOC', '文档检查');
                        return item;
                    });
                    _this.taskData = res.data;
                }
                _this.loading = false;
            }).catch(function (error) {
                _this.loading = false;
                _this.$message.error(error.msg);
            });
        },
        taskDel(id) {
            let _this = this;
            _this.$confirm('确定删除此任务?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    groupId: id,
                    isConfirm: true
                }
                const loading = this.$loading({
                    lock: true,
                    text: '删除中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                _this.axios.taskDel(params).then(res => {
                    loading.close();
                    if (res.code == 200) {
                        _this.getGroupList();
                        _this.$message.success(res.msg)
                    } else {
                        _this.$message.error(res.msg)
                    }
                }).catch(error => {
                    loading.close();
                    _this.$message.error(error.msg)
                })
            }).catch(error => {

            })
        }
    }
}
</script>

<style scoped lang='less'>
    @import url('../assets/css/public.css');
    .task-view {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999;
    	.shade {width: 100%;height: 100%;background: rgba(0,0,0,.3);}
		.popup {width: 1243rem;height: 584rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #FFF;box-shadow: 0 5rem 15rem 0 rgba(0, 21, 54, 0.25);
			.title {width: 100%;height: 58rem;background-color: #285FE3;padding: 0 25rem 0 40rem;
				img {width: 23rem;height: 23rem;cursor: pointer;}
			}
            .content {width: 100%;padding: 14rem 40rem 0;
                .t-title {margin-top: 18rem;font-size: 18rem;color: #505971;
                    span {color: #285FE3;}
                }
                .btn-xiafa {width: 100rem;height: 34rem;border: 1px solid #316EFF;background: linear-gradient(0deg, #D8DCE7 0%, #FFFFFF 100%);border-radius: 3rem;cursor: pointer;}
                .theader {width: 100%;height: 36rem;background: #F4F5F8;border: 1px solid #D0D6E3;border-radius: 3rem;padding: 0 30rem 0 15rem;margin-top: 7rem;
                    .triangle {width: 0;height: 0;border-top: 8rem solid #505971;border-left: 8rem solid transparent;border-right: 8rem solid transparent;margin-left: 5rem;}
                }
                .theader > div {text-align: center;font-size: 18rem;color: #505971;}
                .tbodys {width: 100%;height: 315rem;overflow-y: scroll;}
                .tbodys::-webkit-scrollbar {display: none;}
                .tbodys {scrollbar-width: none;-ms-overflow-style: none;overflow-x: hidden;overflow-y: auto;}
                .tbody {width: 100%;min-height: 42rem;border: 1px solid #D0D6E3;border-radius: 3rem;font-size: 18rem;color: #161D2E;margin-top: 3rem;padding: 0 30rem 0 15rem;}
                .w330 {width: 3.3%;text-align: center;}
                .w4630 {width: 49.6%;}
                .w1460 {width: 14.6%;}
                .w840 {width: 8.4%;white-space: normal;word-break: break-all;}
            }
            .btns {width: 100%;position: absolute;bottom: 34rem;
                .btn {width: 130rem;height: 40rem;margin-left: 112rem;line-height: 40rem;text-align: center;border-radius: 3rem;font-size: 22rem;cursor: pointer;}
                .btn.sure {background: linear-gradient(0deg, #00A366 0%, #00C37A 100%);color: #FFF;}
                .btn.cancel {border: 1px solid #316EFF;background: linear-gradient(0deg, #D9DDE8 0%, #FFFFFF 100%);color: #505971;}
                .btn:first-child {margin-left: 0;}
            }
		}
	}
</style>